<template>
    <div class="header">
          <div class="logo">
            <img src="../assets/logo.svg" alt="" width="20px" height="20px" style="margin-right: 10px;">
            <ul>
                <li><RouterLink to="/home/btn">按钮</RouterLink></li>
                <li><RouterLink to="/home/form">表单</RouterLink></li>
                <li><RouterLink to="/home/table">表格</RouterLink></li>
                <li><RouterLink to="/layout">布局</RouterLink></li>
            </ul>
          </div>
          <button>退出登录</button>
    </div>

</template>
<script setup>
import { RouterLink } from 'vue-router';

</script>
<style scoped>
.header{
    height: 60px;
    padding: 0 10px;
    background-color: antiquewhite;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header .logo{
    display: flex;
    align-items: center;
}
.header ul{
    display:flex;
}
li {
    list-style: none;
    margin-right: 20px;
}
</style>